// 操作按钮组
const optionGroup = document.querySelector("#options_btn_group")
optionGroup.buttons = document.querySelectorAll("#options_btn_group button")
optionGroup.oDelete = optionGroup.buttons[1]
optionGroup.oModify = optionGroup.buttons[2]
// 删除按钮组
const deleteGroup = document.querySelector("#delete_group")
deleteGroup.buttons = document.querySelectorAll("#delete_group button")
// 修改按钮组
const modifyGroup = document.querySelector("#modify_group")
modifyGroup.buttons = document.querySelectorAll("#modify_group button")

// 用户表单
const trs = document.querySelectorAll("#table_user_list tr")
trs.removeBeginColumn = function () {
    for (let i = 0; i < trs.length; i++) {
        trs[i].removeChild(trs[i].childNodes[1])
    }
}
const trOrder = {
    id: 0,
    name: 1,
    level: 2,
    account: 3,
    password: 4,
    email: 5
}

// 模态框
const modal = document.querySelector("#user_add_modal")
modal.headtitle = document.querySelector("#user_add_modal .modal-title")
modal.form = document.querySelector("#user_add_modal form")
modal.form.inputs = document.querySelectorAll("#user_add_modal input")
const iptOrder = {
    id:0,
    name: 1,
    account: 2,
    password: 3,
    email: 4,
    // level 是选择框
}
modal.form.select = document.querySelector("#user_add_modal select")

// 删
optionGroup.oDelete.onclick = function () {
    optionGroup.className = "hidden"
    deleteGroup.className = ""
    modal.form.action = "deleteUser"

    let th = document.createElement("th");
    th.innerText = "选择"
    trs[0].insertBefore(th, trs[0].childNodes[1])

    for (let i = 1; i < trs.length; i++) {
        th = document.createElement("th");
        const input = document.createElement("input");
        input.type = "checkbox"
        input.value = trs[i].childNodes[1].textContent
        th.append(input)
        trs[i].insertBefore(th, trs[i].childNodes[1])
    }
}
deleteGroup.buttons[1].onclick = function () {
    optionGroup.className = ""
    deleteGroup.className = "hidden"
    modal.form.action = "adduser"

    trs.removeBeginColumn()
}
deleteGroup.buttons[0].onclick = function () {
    const target = document.querySelector("#target")
    const checkboxes = document.querySelectorAll("#table_user_list input");
    const obj = {
        'target': []
    };
    let count = 0;
    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            obj.target[count] = checkboxes[i].value
            count++
        }
    }

    target.value = JSON.stringify(obj)
    document.forms['userlist_form'].submit()
}

// 改
optionGroup.oModify.onclick = function () {
    optionGroup.className = "hidden"
    modifyGroup.className = ""

    let th = document.createElement("th");
    th.innerText = "选择"
    trs[0].insertBefore(th, trs[0].childNodes[1])

    for (let i = 1; i < trs.length; i++) {
        th = document.createElement("td");

        const but = document.createElement("button");
        but.innerHTML = "<span class='glyphicon glyphicon-edit' aria-hidden='true'></span>"
        but.type = "button"
        but.className = "btn btn-warning btn-xs"

        but.onclick = function () {
            $(modal).modal('show')
            modal.form.action = "updateUser"

            const inputs = modal.form.inputs
            const tds = trs[i].children
            modal.headtitle.innerHTML = "修改 " + tds[trOrder.name + 1].innerText

            inputs[iptOrder.id].value = tds[trOrder.id + 1].innerText
            inputs[iptOrder.name].value = tds[trOrder.name + 1].innerText
            inputs[iptOrder.account].value = tds[trOrder.account + 1].innerText
            inputs[iptOrder.password].value = tds[trOrder.password + 1].innerText
            inputs[iptOrder.email].value = tds[trOrder.email + 1].innerText

            const select = modal.form.select

            for (let i = 0; i < select.childElementCount; i++) {
                const o = select.children[i];
                if (tds[trOrder.level+1].innerText === o.innerHTML) {
                    o.selected = true
                    break
                }
            }
        }

        th.append(but)
        trs[i].insertBefore(th, trs[i].childNodes[1])
    }
}
modifyGroup.buttons[0].onclick = function () {
    optionGroup.className = ""
    modifyGroup.className = "hidden"

    trs.removeBeginColumn()
}
